<template>
	<view class="list" v-if="list">
		<u-tabs :list="tablist" :current="current" @change="change"></u-tabs>
			<view class="content" v-if="list.length > 0">
				<view class="list-item" v-for="(item,index) in list" :key="index" >
					<view class="list-item-left"  @click="jump(item)"><image mode="aspectFill" :src="item.coverImg"></image></view>
					<view class="list-item-right" @click="jump(item)">
						<view class="info">
							<p class="title"><span class="yc" v-if="item.original == 1">原创</span><text>{{item.articleTitle}}</text></p>
							<p><span class="reprint">{{item.original == 2?item.reprint:item.auditName || item.authName}}</span>{{filterData2(item.createTime)}}</p>
						</view>
					</view>
				</view>
			</view>
			<view class="noneChating" v-if="list.length <= 0">
				<image src="../../../static/img/index/chattingNone.png"></image>
				<view>暂无数据</view>
			</view>
	</view>
</template>
<script>
	import {filterData2} from '@/static/js/filter.js'
	export default{
		data(){
			return {
				tablist: [],
				current:0,
				list:null
			}
		},
		onLoad() {
			this.getTypeList()
			// this.getlist();
			setTimeout(()=>{this.getlist()},1000)
		},
		methods:{
			change(index){
				this.current = index;
				this.getlist()
			},
			filterData2,
			getlist(e){
				const type = this.tablist ? this.tablist[this.current].id : ''
				this.$api.Articlelist({pageIndex:1,pageSize:20,type:type==9?1:type}).then((res)=>{
					this.list = res.data.result && res.data.result.list || []
				})
			},
			// 文章类型
			getTypeList() {
				this.$api.ArticleTypelist().then((res) => {
					this.tablist = res.data.result && res.data.result.map((a) => {
						return {
							name: a.articleTypeName,
							id: a.id
						}
					})
				})
			},
			jump(item){
				uni.navigateTo({
					url: '/pages/monitor/article/articledetail?id='+item.id+'&status='+item.status
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.u-tabs{
		position: fixed;
		top: 88upx;
		left: 0;
		background: #fff;
		z-index: 10;
	}
	.content{
		padding-top: 130upx;
	}
	.list{
		background: #f8f8f8;
	}
	.header{
		width: 100vw;
		padding:22upx 24upx 26upx;
		background: #38CB97;
		position: fixed;
		top:88upx;
		z-index: 10;
		.hd{
			display: flex;
			align-items: center;
			.add-icon{
				width: 82upx;
				height: 82upx;
				margin-right: 36upx;
			}
			span{
				flex:1;
				font-size: 36upx;
				color: #fff;
			}
			.search{
				width: 168upx;
				height: 48upx;
				background: rgba(255,255,255,.25);
				display: flex;
				align-items: center;
				image{
					width: 22upx;
					height: 22upx;
					margin-left: 17upx;
					margin-right: 13upx;
				}
				input{
					font-size: 22upx;
					flex:1;
					height: 48upx;
					color: #fff;
				}
			}
		}
		
	}
	.list{
		min-height: calc(100vh - 44px);
		&-item{
			width: 94vw;
			display: flex;
			align-items: center;
			background: #fff;
			margin: 0 auto 24upx;
			border-radius: 12upx;
			height: 200upx;
			.uni-swipe{
				width: 100%;
			}
			&-left{
				margin-left: 24upx;
				width: 120upx;
				height: 120upx;
				text-align: center;
				line-height: 120upx;
				color: #fff;
				margin-right:38upx;
				border-radius: 8upx;
				font-size: 26upx;
				image{
					width: 120upx;
					height: 120upx;
					border-radius: 8rpx;
				}
			}
			&-right{
				margin-right: 24upx;
				flex:1;
				display: flex;
				padding:37upx 0 46upx 0;
				.info{
					flex:1;
					color: #999;
					p{
						margin-top: 8upx;
						max-width: 486upx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						line-height: 1.9;
					}
					.reprint{
						margin-right: 15upx;
					}
				}
				.title{
					color: #333;
					.yc{
						font-size: 22upx;
						padding: 0px 12upx;
						color: #38CB97;
						border: 1px solid #38CB97;
						border-radius: 15px;
						margin-right: 10upx;
					}
					text{
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 32rpx;
						font-weight: bold;
					}
				}
				.status{
					font-size: 26upx;
					&.not-active{
						color: #1A85E9;
					}
					&.active{
						color: #38CB97;
					}
				}
			}
		}
	}
	.noneChating {
		padding-top: 228upx;
		image {
			display: block;
			margin: 0 auto;
			width: 260upx;
			height: 154upx;
		}
		view {
			margin: 24px auto;
			text-align: center;
			color: #333333;
			font-size: 13px;
		}
	}
	.uni-swipe{height: 200upx;}
	/deep/ .uni-swipe_box{
		display: flex;
		align-items: center;
		height: 200upx;
	}

	/deep/ .u-scroll-view {
		width: 750upx !important;
	}
</style>
